<template>
	<view class="category" scroll-y>
		<scroll-view class="left-nav">
			<view class="nav-item" v-for="(item, index) in category" 
						:key="index" 
						:class="index === currentIndex ? 'active' : '' "
						@click="navItemClikc(index)">
				{{item.title}}
			<!-- 	<image src="~@/static/common/ic_arrow_r.svg"></image> -->
				<text>></text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				category: [],
				currentIndex: 0
			}
		},
		onLoad() {
			this.getCategory()
		},
		methods: {
				getCategory(){
					this.$myRequest({
						url: '/category'
					}).then(res => {
						this.category = res.data.data.category.list
						console.log(this.category)
					})
				},
				navItemClikc(index){
					this.currentIndex = index
				}
		}
	}
</script>

<style lang="scss">
	.category{
		.left-nav{
			width: 200rpx;
			line-height: 90rpx;
			font-size: 28rpx;
			text-align: center;
			background-color: #f6f6f6;
			color: #666666;
			.nav-item{
				height: 90rpx;
				width: 200rpx;
				text{
					float: right;
					font-size: 30rpx;
					width: 50rpx;
					height: 50rpx;
				}
				
			}
			.active{
				color: #ff5777;
				background-color: #fff;
				font-weight: 550;
			}
		}
	}
</style>
